<template>
  <view class="page content">
    <!-- 列表 -->
    <view class='news-list margin-wrap'>
      <scroll-view class='scroll-view' :style="{height:contentListHeight+'px'}" lower-threshold='100' upper-threshold='100'
        :scroll-top="scrollTop" scroll-y="true" @scrolltolower="handleScrolltolower">
        <uni-image-list :contents="contentList"></uni-image-list>
        <!-- load-more -->
        <view>
          <uni-load-more :status="loadingStatus"></uni-load-more>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  import uniSwiper from '../../components/uni-swiper.vue'
  import uniImageList from '../../components/uni-image-list.vue'
  import api from '../../common/api/api.js'
  export default {
    components: {
      uniSwiper,
      uniImageList
    },
    data() {
      return {
        contentListHeight: 0,
        contentList: [],
        page: 1,
        size: 20,
        scrollTop: 0,
        scrollY: true,
        hotNews: [],
        images: [
          '/static/images/swiper/image1.jpg',
          '/static/images/swiper/image2.jpg',
          '/static/images/swiper/image3.jpg'
        ],
        mode: 'scaleToFill',
        indicatorDots: true,
        indicatorActiveColor: '#F0AD4E',
        circular: true,
        autoplay: true,
        interval: 3000,
        duration: 500,
        loadingStatus: ''
      }
    },
    methods: {
      requestNews: function(page, size) {
        this.loadingStatus = 'loading'
        let that = this;
        // api.getcontentList({
        //   "page": page,
        //   "count": size
        // })
        api.getArticleList({
            "url": 'http://wp.birdpaper.com.cn/intf/GetListByCategory?cids=15&pageno=' + page + '&count=' + size
          })
          .then(res => {
            const {
              errno,
              data
            } = res
            // console.log(data)
            if (errno == 0) {
              that.contentList = [...that.contentList, ...data.list]
            } else {
              uni.showToast({
                title: message,
                icon: 'none'
              })
            }
          }).catch(err => {
            console.error(err);
          })
      },
      handleScrolltolower: function(e) {
        this.requestNews(++this.page, this.size)
      }
    },
    onLoad: function(e) {
      this.requestNews(this.page, this.size);
    },
    onReady: function() {
      let that = this;
      uni.getSystemInfo({
        success(res) {
          let windowHeight = res.windowHeight;
          // boundingClientRect方法返回的是调用该方法的元素的TextRectangle对象，该对象具有top、left、right、bottom四个属性，分别代表该元素上、左、右、下四条边界相对于浏览器窗口左上角的偏移像素值
          uni.createSelectorQuery().select(".scroll-view").boundingClientRect(data => {
            that.contentListHeight = windowHeight - data.top;
          }).exec()
        }
      })
    }
  }
</script>

<style>
  .content {}

  .margin-wrap {
    margin: 10rpx;
  }

  .page-section-swiper {}

  .news-list {
    overflow-y: scroll;
  }

  /deep/ .uni-list-item__content-title {
    font-size: 16px;
  }

  .scroll-view {}
</style>
